<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .image-item{
            display: block;
          height: 300px;
          margin-bottom: 50px;
        }
    </style>
</head>
<body>
    <img class="image-item" lazyload="true" src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100120461512E-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991614&t=ab13128bf7fd044dc5e228f894855e29" alt="">
    <img class="image-item" lazyload="true" src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0829%2F372edfeb74c3119b666237bd4af92be5.jpg&refer=http%3A%2F%2Ffile02.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991614&t=962c80f8695290866123b516f393033b" alt="">
    <img class="image-item" lazyload="true" src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.redocn.com%2Fphoto%2F20140313%2FRedocn_2014031216224618.jpg&refer=http%3A%2F%2Fimg.redocn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991614&t=89e8d47effd9b83fb3b12184b1efb94f" alt="">
    <img class="image-item" lazyload="true" src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ20QJS6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991614&t=bfc32f9a955688ae1222e94b39b53541" alt="">
    <img class="image-item" lazyload="true" src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2015%2F0122%2F9e69aa673f6f0c1a07d7026632c679b2.jpg&refer=http%3A%2F%2Ffile02.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991614&t=b283aa5d8a187f6f541491e191577a00" alt="">
    <img class="image-item" lazyload="true" src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic14.nipic.com%2F20110505%2F545848_145235267178_2.jpg&refer=http%3A%2F%2Fpic14.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991614&t=f4d16565d57de1293146c1c6c1b6537d" alt="">
    <img class="image-item" lazyload="true" src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0814%2F17c8e8c3c106b879aa9f4e9189601c3b.jpg&refer=http%3A%2F%2Ffile02.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991614&t=842f892a58005023482d6dcb8c92a8fd" alt="">
    <img class="image-item" lazyload="true" src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp03%2F1Z921104109E54-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991614&t=2a3815788593a82b181ab35751989623" alt="">
    <img class="image-item" lazyload="true" src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp03%2F1Z921104109E54-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991614&t=2a3815788593a82b181ab35751989623" alt="">
    <img class="image-item" lazyload="true" src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991614&t=f10e0200583490f36efa596cb400a2fd" alt="">
    <img class="image-item" lazyload="true" src="" data-original="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F003bba6c74ce151d3ce31aaa6cb7c6ecb72683e917605-ekncjt_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641991614&t=280b578d9515f32e5c0cd3bc939d0f8e" alt="">
    <script>
        let viewHeigth = document.documentElement.clientHeight
        // console.log(viewHeigth);
        function lazyLoad() {
            let eles = document.querySelectorAll('img[data-original][lazyLoad]')
            // console.log(eles);
            eles.forEach((item) => {
                // console.log(item);
                let rect;
                rect = item.getBoundingClientRect()
                // console.log(rect);
                if(rect.bottom >= 0 && rect.top < viewHeigth){//在可视区域内
                    let img = new Image()
                    img.src = item.dataset.original
                    img.onload = function(){
                        item.src = img.src
                    }
                
                    item.removeAttribute('data-original')
                    item.removeAttribute('lazyload')
                }
            })
        }
        lazyLoad()
        document.addEventListener('scroll',lazyLoad)
    </script>
    
</body>
</html>